<template>
	<view class="">
		<view class="imgs-list">
			<view class="imgs-item" @tap="upImg(item,index)" :style="{width:itemStyle.width,height:itemStyle.height}"
				v-for="(item,index) in upImgList" :key="index">
				 <video v-if="currentImgs.type == 5" id="myVideo" :src="item" enable-danmu danmu-btn controls style="width: 90%;height: 100%; border-radius: 20rpx;background: #ccc;"></video>
				<image  v-else :src="item" style="width: 90%;height: 100%; border-radius: 20rpx;background: #ccc;" mode="">
				</image>
				<view class="del-img" @tap.stop="tapDelImg(item,index)">
					×
				</view>
			</view>
			<view class="imgs-item" @tap="upImg" :style="{width:itemStyle.width,height:itemStyle.height}">

				<view style="color: #b9b9b9; width: 90%;height: 100%; border-radius: 20rpx;background: #f8f7f7;"
					class="d-flex a-center j-center flex-column">
					<view class="" style="font-size: 100rpx;">
						+
					</view>
					<view class="d-flex a-center j-center font-22">
						<view class="">
							支持
						</view>
						<view class="d-flex a-center j-center">
							<view :key="index" class="" v-for="(item,index) in currentImgs.types">
								{{item}}<text v-if="currentImgs.types.length -1 != index">/</text>
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemStyle: {
				type: Object,
				default: () => {}
			},
			currentImgs: {
				type: Object,
				default: () => {}
			}
		},
		mounted() {

		},
		data() {
			return {
				upImgList: []
			}
		},
		methods: {
			// 删除图片
			async tapDelImg(item, index) {
				uni.showLoading({
					title: "删除中"
				})
				var result = await uniCloud.deleteFile({
					fileList: [item]
				})
				if (result.success) {
					this.upImgList.splice(index, 1)
					uni.hideLoading()
				} else {
					uni.showToast({
						title: "删除失败",
						icon: "none"
					})
				}
				console.log(result, '删除')
			},
			// 上传图片
			upImg(item, index) {
				if (this.currentImgs.type == 5) {
					var self = this;
					uni.chooseVideo({
						sourceType: ['camera', 'album'],
						success: async function(res) {
							console.log(res, '1111111111112222222222')
							uni.showLoading({
								title: "上传中"
							})
							const result = await uniCloud.uploadFile({
								filePath: res.tempFilePath,
								cloudPath: res.name,
								onUploadProgress: function(progressEvent) {
									console.log(progressEvent);
									var percentCompleted = Math.round(
										(progressEvent.loaded * 100) /
										progressEvent
										.total
									);
								}
							});
							setTimeout(() => {
								uni.hideLoading()
								self.upImgList = [...self.upImgList, ...[result.fileID]]
								self.$emit('upImg', self.upImgList)
							}, 500)
							// if (index || index == 0) {
							// 	this.upImgList.splice(index1, 1, result.fileID);
							// } else if (res.tempFiles.length != 0) {
							// 	this.upImgList = [...this.upImgList, ...[result.fileID]];
							// }
							// if (res.tempFiles.length - 1 == index1) {

							// }


						}
					});
					return
				}
				uni.chooseImage({
					count: 100, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: res => {
						uni.showLoading({
							title: "上传中"
						})
						res.tempFiles.forEach(async (item, index1) => {

							const result = await uniCloud.uploadFile({
								filePath: item.path,
								cloudPath: item.name,
								onUploadProgress: function(progressEvent) {
									console.log(progressEvent);
									var percentCompleted = Math.round(
										(progressEvent.loaded * 100) /
										progressEvent
										.total
									);
								}
							});

							if (index || index == 0) {
								this.upImgList.splice(index1, 1, result.fileID);
							} else if (res.tempFiles.length != 0) {
								this.upImgList = [...this.upImgList, ...[result.fileID]];
							}
							if (res.tempFiles.length - 1 == index1) {
								setTimeout(() => {
									uni.hideLoading()
									console.log(this.upImgList)
									this.$emit('upImg', this.upImgList)
								}, 500)
							}
						})


						// console.log(JSON.stringify(res.tempFilePaths));
						// var upImgList = res.tempFilePaths;

						// console.log(upImgList);
						// console.log(upImgList[0]);

					}
				});
			},
			openImg(item, index) {
				uni.navigateTo({
					url: "/pages/common/works-details?id=" + item.id || 1
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.del-img {
		position: absolute;
		top: -10rpx;
		right: 10rpx;
		width: 50rpx;
		height: 50rpx;
		background: red;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.imgs-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.imgs-item {
			display: flex;
			width: 25%;
			height: 150rpx;
			border-radius: 20rpx;
			margin-bottom: 15rpx;
			position: relative;
		}
	}
</style>
